<template>
  <section class="article-list">
    <!-- 遍历文章列表，传入具体属性 -->
    <BlogArticle
        v-for="article in articles"
        :key="article.id"
        :title="article.title"
        :summary="article.summary"
        :category="article.category"
        :date="article.date"
    />
  </section>
</template>

<script setup>
import BlogArticle from './BlogArticle.vue';

// 接收文章列表
defineProps({
  articles: {
    type: Array,
    required: true,
  },
});
</script>

<style scoped>
.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px; /* 增加内边距 */
}

@media (max-width: 768px) {
  .article-list {
    grid-template-columns: 1fr; /* 在小屏幕上单列显示 */
  }
}
</style>